<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{padding: 0;margin: 0;}
			ul{list-style: none;}
			#div{height:100%;position: fixed;top:0;right:0;}
			#box{height:100%;width:0px;background:#444;position: relative;
				}
			.space{height:100%;width:6px;background:#000;position: absolute;
				z-index:-1;left:-6px;top: 0;}
			#list{position: absolute;left:-35px;top: 0;background:#000;width:60px;height:100%;background:#000;}		
			.padding{margin-top: 150px;}	
			#list li a{display:block;height:35px;width:60px;background:#000;margin-bottom: 10px;
				z-index:0;}
			#list li span{display:block;height:35px;width:60px;text-decoration: none;line-height: 35px;
				padding-left:6px;color:#fff;font-size: 12px;background:#c81623;z-index:-2;display: none;
				position: absolute;left:0px;border-radius: 4px;}	
			.display{display:none;}
			.a7{position:fixed;bottom: 36px;}
			.a8{position:fixed;bottom: 0px;}
		</style>
	</head>
	<script src="js/jquery.js"></script>
	<script>
		$(function(){
			$('.list-top li').hover(function(){
				$(".list-top li a").eq($(this).index()).css("background","#c81623")
				$(".list-top li span").eq($(this).index()).css({"display":"block"}).animate({left:"-60px"},400)				
			},function(){
				$(".list-top li a").eq($(this).index()).css("background","#000")
				$(".list-top li span").eq($(this).index()).css({"display":"none","left":"0"}).animate({left:"0px"},400)				
			})

			$('.list-top li').on("click",function(){
				if($("#box").width()==0){
				$(".list-top li a").eq($(this).index()).css("background","#c81623")				
				$("#box").animate({width:"270px"},500)
				}
				$('.list-top li').eq($(this).index()).on("click",function(){
					if($("#box").width()==270){
					$("#box").animate({width:"0px"},500)
					}
				})
			})
					
		})
	</script>
	<body>
		<div id="div">
			<div id="list">
				<ul class="list-top">

					<li class="padding"><span>我的特权</span><a href="javascript:;"><img src="img/1.jpg" alt=""></a></li><!-- 客服 -->
					<li><span class="display">购物车</span><a href="javascript:;"><img src="img/9.png" alt=""></a></li><!-- 购物车 -->
					<li><span>我的资产</span><a href="javascript:;"><img src="img/4.png" alt=""></a></li><!-- 我的资产 -->
					<li><span>我关注的品牌</span><a href="javascript:;"><img src="img/5.png" alt=""></a></li><!-- 关注 -->
					<li><span>我的收藏</span><a href="javascript:;"><img src="img/6.png" alt=""></a></li><!-- 收藏 -->
					<li><span>我的足迹</span><a href="javascript:;"><img src="img/7.png" alt=""></a></li><!-- 看过的 -->
					<li><span>我要充值</span><a href="javascript:;"><img src="img/10.png" alt=""></a></li><!-- 充值 -->
					<li><span>用户反馈</span><a href="javascript:;"><img src="img/8.png" alt=""></a></li><!-- 用户反馈 -->
					<li><span class="display">二维码</span><a href="javascript:;"><img src="img/3.png" alt=""></a></li><!-- 二维码 -->
					<li><span>返回顶部</span><a href="javascript:;"><img src="img/2.png" alt=""></a></li><!-- top -->

				</ul>
			</div>
			<div class="space"></div>
			<div id="box"></div>
		</div>	
		
	</body>
</html>
